<template>
  <div class="tl-collapse">
    <tl-collapse text="填写你的标题">
      <p>需要折叠的内容</p>
      <span>属性</span>
      <p>1.text:填写你的标题</p>
      <p>2.collapsed:默认折叠</p>
      <span>code:</span>
      <pre style="background:'grey'">
        {{ code }}
      </pre>
    </tl-collapse>

    <tl-collapse text="select">
      123
    </tl-collapse>
  </div>
</template>

<script>
import TlCollapse from '@/components/TlCollapse/index'
export default {
  components: { TlCollapse },
  computed: {
    code() {
      return `<tl-collapse text="填写你的标题" collapsed>
                <p>需要折叠的内容</p>
                <span>属性</span>
                <p>1.text:填写你的标题</p>
                <p>2.collapsed:默认折叠</p>
      </tl-collapse>`
    }
  }
}
</script>

<style scoped>
.tl-collapse {
  width: 400px;
  margin: 20px auto;
}

pre {
  line-height: 1.5;
  background-color: antiquewhite;
  color: #4d7d7c;
  padding-top: 10px;
}
</style>
